<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #map{
            /* width: 600px; */
            /* height: 600px; */
            border: 5px solid #000;
            background: #ccc;
            position: relative;
        }
        .snake{
            width: 20px;
            height: 20px;
            background: red;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
            position: absolute;
        }
        .snake-body{
            width:20px;
            height:20px;
            background:black;
            position:absolute;
        }
    </style>
</head>
<body>
    <div id="map">

        <!-- <div class="snake"></div> -->
    </div>
</body>
</html>
<script>
    //每一个格子的宽高
    const wid = 20
    //水平方向最大格子数
    const hig = 20
    //垂直方向最大格子数
    const higmax = 20

    //获取地图
    const map = document.querySelector('#map')

    //定义地图大小  宽/高
    map.style.width = wid * hig + 'px'
    map.style.height = wid * higmax + 'px'

    //使用数组代表蛇的身体
    //每个数组代表一段蛇的身体
    //x代表蛇在水平方向第 x 个格子上  // 同理 y
    let snakeArr = [
        {
            x:5,
            y:1
        },
        {
            x:4,
            y:1
        }
    ]
    
    //创建蛇
    function drawSnake() {
        // 拼凑蛇身的 html 字符串
        let snakeHtml = ''
        // 循环所有的蛇身，并计算出该蛇身所处的 left 和 top 偏移 （格子数 * 格子大小  + px）
        for (let i = 0; i < snakeArr.length; i++) {
            snakeHtml += `<div class="snake-body" style="left:${snakeArr[i].x * wid}px;top:${snakeArr[i].y * wid}px;"></div>`
        }
        // 将拼凑好的蛇身html  字符串，设置为 map 的 innerHTML，重新显示
        map.innerHTML = snakeHtml
    }
    // drawSnake()

    let direction = [0,1]
    //移动蛇

    function move(){
        for(let i = snakeArr.length - 1;i > 0; i--){
            snakeArr[i].x = snakeArr[i - 1].x
            snakeArr[i].y = snakeArr[i - 1].y
        }
        snakeArr[0].x += direction[0]
        snakeArr[0].x += direction[1]
    }
    document.onkeydown = function (e) {
        switch (e.keyCode) {
            // 左
            case 37:
                // 判断贪吃蛇是否没有向右移动
                if (direction[0] !== 1) direction = [-1, 0]
                break
            // 上
            case 38:
                // 判断贪吃蛇是否没有向下移动
                if (direction[1] !== 1) direction = [0, -1]
                break
            // 右
            case 39:
                // 判断贪吃蛇是否没有向左移动
                if (direction[0] !== -1) direction = [1, 0]
                break
            // 下
            case 40:
                // 判断贪吃蛇是否没有向上移动
                if (direction[1] !== -1) direction = [0, 1]
                break
        }
    }


    function run(){

        drawSnake()

        move()

    }
    setInterval(run,200)
</script>